<template>
  <view class="charts-box" v-if="echartDataEmpty">
    <ve-empty marginTop="12" text="根据您的筛选统计数据时发现暂无数据，请重新筛选"></ve-empty>
  </view>
  <template v-else>
    <view class="charts-box">
      <qiun-data-charts type="demotype" :eopts="opts" :chartData="echart_series" :reload="reload" :echartsH5="true" :echartsApp="true" />
    </view>
    <div class="echarts-table">
      <div class="header">
        <div class="item-cell">
          <div class="color-gray" style="width: 40%; padding-right: 10px">门店</div>
          <div class="color-gray" style="width: 20%; padding-right: 10px">收入(元)</div>
          <div class="color-gray" style="width: 20%; padding-right: 10px">支出(元)</div>
          <div class="color-gray" style="width: 20%; padding-right: 10px">收益(元)</div>
        </div>
      </div>
      <div class="body">
        <div class="list-cell" v-for="item in echartData?.infoList" :key="item.id">
          <div class="color-black truncate" style="width: 40%; color: #1d2129; padding-right: 10px">{{ item.name }}</div>
          <div class="text-price" style="width: 20%; padding-right: 10px">{{ formatNumber(item.totalRevenueAmount, false) }}</div>
          <div class="text-price color-green" style="width: 20%; padding-right: 10px">
            {{ formatNumber(item.totalExpenditureAmount, false) }}
          </div>
          <div class="text-price color-red" style="width: 20%; padding-right: 10px">{{ formatNumber(item.totalProfitAmount, false) }}</div>
        </div>
      </div>
    </div>
  </template>
</template>

<script setup lang="ts">
  import { formatNumber } from '@/utils'
  import dayjs from 'dayjs'
  import { ref, watch } from 'vue'

  const props = defineProps({
    echartData: {
      type: Object,
      default: () => ({}),
    },
  })

  const echart_series = ref<any>({})
  const opts = {
    title: {
      text: `${dayjs(props.echartData?.date).format('MM[月]DD[日]')}`,
      top: 'bottom',
      left: '15%',
      textStyle: {
        fontSize: 14,
        color: '#1D2129',
      },
    },
    legend: {
      icon: 'circle',
      itemWidth: 10,
      selectedMode: false,
      top: 'bottom',
      textStyle: {
        fontSize: 14,
      },
    },
    graphic: {
      elements: [
        {
          type: 'text',
          left: 'center',
          top: 'center',
          style: {
            text: '暂无数据',
            fill: '#1D2129',
            fontSize: 14,
            fontWeight: 500,
          },
        },
        {
          type: 'text',
          left: 'center',
          top: '53%',
          style: {
            text: '',
            fill: '#1D2129',
            fontSize: 14,
            fontWeight: 500,
          },
        },
      ],
    },
  }

  const echartDataEmpty = ref(true)
  const reload = ref(false)

  watch(
    () => props.echartData,
    (newVal) => {
      echartDataEmpty.value = true
      echart_series.value = {}

      if (newVal) {
        const hasData = newVal.totalRevenueAmount != 0 || newVal.totalExpenditureAmount != 0 || newVal.totalProfitAmount != 0

        if (!hasData) {
          return
        } else {
          echartDataEmpty.value = false
        }

        opts.graphic.elements[0].top = newVal.totalProfitAmount ? '46%' : 'center'
        opts.graphic.elements[0].style.text = newVal.totalProfitAmount ? '总收益' : '暂无数据'
        opts.graphic.elements[1].style.text = newVal.totalProfitAmount ? formatNumber(newVal.totalProfitAmount, false) + '元' : ''
        const series = [
          {
            type: 'pie',
            // startAngle: 300, //起始角度
            radius: ['40%', '60%'],
            center: ['50%', '50%'],
            label: {
              format: 'pieLabelFormat',
              color: '#000',
            },
            data: [
              {
                value: Math.abs(newVal.totalRevenueAmount),
                source: newVal.totalRevenueAmount,
                legend_name: '总收入',
                itemStyle: {
                  color: '#1890FF',
                },
                name: '收入',
              },
              {
                value: Math.abs(newVal.totalExpenditureAmount),
                source: newVal.totalExpenditureAmount,
                legend_name: '总支出',
                itemStyle: {
                  color: '#86DF6C',
                },
                name: '支出',
              },
            ],
            emphasis: {
              disabled: true,
            },
          },
        ]
        reload.value = true
        echart_series.value = JSON.parse(JSON.stringify({ series }))
      }
    },
    {
      immediate: true,
      deep: true,
    },
  )
</script>

<style scoped lang="less">
  .charts-box {
    width: 100%;
    height: 300px;
  }

  .echarts-table {
    overflow-x: auto;

    .header,
    .body {
      width: 450px;
    }

    .item-cell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 32px;
      padding: 6px 10px;
      background: #f2f3f5;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .list-cell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 6px 10px;
      border-bottom: 1px solid #e5e6eb;
    }
  }

  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .text-price {
    color: #178fff;
  }

  .color-black {
    color: #1d2129;
  }

  .color-gray {
    color: #4e5969;
  }

  .color-green {
    color: #5bbc3e;
  }

  .color-red {
    color: #ec6571;
  }
</style>
